<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>主页面</title>
</head>

<body>
    <h1>另一个面</h1>
    <h2>设置键值对</h2>
    <label>key:
        <input type="text" class="key">
    </label>
    <label>value:
        <input type="text" class="value">
    </label>
    <input type="submit" value="提交" class="submit"> 
    
    <button class="getLocalStorage">获取localStorage</button>
    <div class="storageContent"></div>

    <script type="text/javascript" src="../../source/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        var $key = $('.key'),
            $value = $('.value'),
            $storageContent = $('.storageContent');

        $('.submit').on('click',function() {
            localStorage.setItem($key.val(), $value.val());
        });
        $('.getLocalStorage').on('click',function() {
            $storageContent.text(JSON.stringify(localStorage));
        });

    </script>
</body>

</html>